<div class="entity-view" @click="cancelEditStatus">
    <div class="entity-title">
        <ui-label value="实体列表"></ui-label>
    </div>
    <div class="entity-list" @keydown="handleKeyDown">
        <!-- 分组部分 -->
        <template v-for="group in getEntitys().groups">
            <div class="entity-group">
                <div class="group-header" @dragover.prevent @drop="handleDrop($event, group.name)">
                    <i class="arrow" :class="{ expanded: isGroupExpanded(group.name) }"
                        @click.stop="toggleGroup(group.name)"></i>
                    <!-- 分组名称编辑区域 -->
                    <template v-if="editingGroupName === group.name">
                        <div class="edit-area" @click.stop>
                            <ui-input :value="newGroupName" @confirm="onGroupNameChange($event.target.value)"
                                @cancel="cancelEditStatus"></ui-input>
                            <ui-icon value="success" class="confirm-icon" @click="saveGroupName"></ui-icon>
                            <ui-icon value="error" class="cancel-icon" @click="cancelEditStatus"></ui-icon>
                        </div>
                    </template>
                    <ui-label v-else :value="group.name" @dblclick.stop="startEditGroupName(group.name)"></ui-label>
                </div>
                <div class="group-content" v-show="isGroupExpanded(group.name)" @dragover.prevent
                    @drop="handleDrop($event, group.name)">
                    <div class="entity-item" v-for="entity in group.entities" @click.stop="selectEntity(entity)"
                        :class="{ 'selected': isEntitySelected(entity), 'dragging': isDragging && draggedEntity === entity }"
                        :draggable="!isEditing()" @dragstart="handleDragStart($event, entity, group.name)"
                        @dragend="handleDragEnd">
                        <!-- 实体名称编辑区域 -->
                        <template v-if="editingEntityName === entity">
                            <div class="edit-area" @click.stop>
                                <ui-input :value="newEntityName" @confirm="onEntityNameChange($event.target.value)"
                                    @cancel="cancelEditStatus" pattern="[a-zA-Z0-9_]+"
                                    title="只能输入英文字母、数字和下划线"></ui-input>
                                <ui-icon value="success" class="confirm-icon" @click="saveEntityName"></ui-icon>
                                <ui-icon value="error" class="cancel-icon" @click="cancelEditStatus"></ui-icon>
                            </div>
                        </template>
                        <div class="entity-item-content" v-else>
                            <ui-label :value="getEntityNameAndAlias(entity)"
                                @dblclick.stop="startEditEntityName(entity)"></ui-label>
                            <ui-icon value="error" class="delete-icon" @click.stop="deleteEntity(entity)"></ui-icon>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <!-- 未分组部分 -->
        <div class="ungrouped-entities" @dragover.prevent @drop="handleDrop($event, '')">
            <ui-label class="ungrouped-entities-title" value="未分组实体"></ui-label>
            <div class="entity-item" v-for="entity in getEntitys().entities" @click.stop="selectEntity(entity)"
                :class="{ 'selected': isEntitySelected(entity), 'dragging': isDragging && draggedEntity === entity }"
                :draggable="!isEditing()" @dragstart="handleDragStart($event, entity, '')" @dragend="handleDragEnd">
                <!-- 实体名称编辑区域 -->
                <template v-if="editingEntityName === entity">
                    <div class="edit-area" @click.stop>
                        <ui-input :value="newEntityName" @confirm="onEntityNameChange($event.target.value)"
                            @cancel="cancelEditStatus" pattern="[a-zA-Z0-9_]+" title="只能输入英文字母、数字和下划线"></ui-input>
                        <ui-icon value="success" class="confirm-icon" @click="saveEntityName"></ui-icon>
                        <ui-icon value="error" class="cancel-icon" @click="cancelEditStatus"></ui-icon>
                    </div>
                </template>
                <div class="entity-item-content" v-else>
                    <ui-label :value="getEntityNameAndAlias(entity)"
                        @dblclick.stop="startEditEntityName(entity)"></ui-label>
                    <ui-icon value="error" class="delete-icon" @click.stop="deleteEntity(entity)"></ui-icon>
                </div>
            </div>
        </div>
    </div>
</div>